<template>
	<view class="myPage bgF5" :style="{'--color': color, '--total-height': totalHeight + 'px'}">
		<status-bar :title='tabTitle' back='0' :showSetting="vid ? 1 : 0" v-if="!pageSet.immerse || toTop"></status-bar>

		<!-- 普通电商 -->
		<view class="top_0 auto100" :class="{'pTop': pageSet.immerse, 'thmeBg': !pageSet.topBgImg}" v-if="pageSet.style == 0"
			:style="{backgroundImage: pageSet.topBgImg ? 'url('+pageSet.topBgImg+')' : 'none'}">
			<view class="d-flex a-center white m-bot40">
				<image :src="userinfo.headimg ? $imgUrls(userinfo.headimg) : $imgUrls(logo)" mode="aspectFill"
					@click="toUrl('/userPage/user/userinfo')" class="avatar bor_radius m-right20"></image>
				<view class="flex-1" v-if="userinfo">
					<view class="size32 bold ellipsis m-bot10">{{ userinfo.nickName }}</view>
					<view class="bgwhite bor_radius_20 padding2-14 size22 thmeColor" v-if="userinfo.vipId"
						style="width: fit-content;">{{ userinfo.vipName }}</view>
				</view>
				<view class="flex-1 size32 bold" v-else @click="showModal = true">登录/注册</view>
				<view class="text-center" @click="toSign" v-if="pageSet.showSignIn == 1">
					<text class="iconfont icon-qiandao size40 p-left20 p-right20"></text>
					<view class="m-top4">签到</view>
				</view>
				<view class="text-center" @click="toUrl('/userPage/message/messageList')"
					v-if="startUp.service_state == 1 && pageSet.showMessage == 1">
					<text class="iconfont icon-conversation_icon size40 p-left20 p-right20"
						:class="{unread: parseInt(userinfo.unreadMsg)}" :data-num="userinfo.unreadMsg"></text>
					<view class="m-top4">消息</view>
				</view>
			</view>
			<view class="d-flex white m-bot40">
				<view class="text-center flex-1" @click="toUrl('/userPage/sign/integralRecord')">
					<view class="size36 bold">{{ userinfo.sign || 0 }}</view>
					<view class="m-top10">{{ nameDefinition.fenTitle || '积分' }}</view>
				</view>
				<view class="text-center flex-1" @click="toUrl('/moneyPage/capital/myMoney')">
					<view class="size36 bold">{{ money }}</view>
					<view class="m-top10">
						{{ nameDefinition.balanceTitle || '余额' }}({{ unit }}{{ nameDefinition.balanceUnit || '元' }})
					</view>
				</view>
				<view class="text-center flex-1" @click="toUrl('/userPage/user/discount_coupon')">
					<view class="size36 bold">{{ userinfo.couponCount || 0 }}</view>
					<view class="m-top10">优惠券</view>
				</view>
				<view class="text-center flex-1" @click="toUrl('/moneyPage/capital/withdraws')" v-if="userinfo.income > 0">
					<view class="size36 bold">{{ parseFloat(userinfo.income) }}</view>
					<view class="m-top10">可提现<text class="iconfont icon-xiangyouxiayiye size22 white"></text></view>
				</view>
			</view>
			<view class="collect bor_radius_top20 d-flex j-sa color_f2">
				<view @click="toUrl('/userPage/user/followList')">关注 {{ userinfo.followCount || 0 }}</view>
				<view @click="toUrl('/userPage/user/CollectList')">收藏 {{ userinfo.collectCount || 0 }}</view>
				<view @click="toUrl('/userPage/user/viewed')">足迹 {{ footprint }}</view>
			</view>
			<!-- 会员 -->
			<view class="grade bg33 bor_radius_top20 color_FC0">
				<view class="wh p-left20 d-flex f-column j-centert p-re" v-if="userinfo">
					<view class="m-bot10">{{ userinfo.vipName }}</view>
					<view class="size40">{{ userinfo.sn_id }}</view>
					<view class="right p-ab"
						@click="toUrl('/userPage/user/introduce?type=1&title='+configJson.entrance_name, false)"
						v-if="configJson.content">
						<text>{{ configJson.entrance_name }}</text>
						<text class="iconfont icon-xiangyouxiayiye h6 color_FC0"></text>
					</view>
					<view class="up padding10-30 white bold p-ab" v-if="userinfo.nextLevel && userinfo.nextLevel.vipPrice > 0"
						@click="toUrl('/pages/Vip/Vip')">升级{{ userinfo.nextLevel.vipName }}会员</view>
				</view>
				<view class="wh flexac size26" v-else @click="showModal = true">点击登录获取会员权益</view>
			</view>
		</view>

		<!-- 餐饮 -->
		<view class="top_1 p-re" v-if="pageSet.style == 1">
			<view class="back auto100 p-ab p-top30"
				:style="{backgroundImage: pageSet.topBgImg ? 'url('+pageSet.topBgImg+')' : 'none'}"
				:class="{'pTop': pageSet.immerse, 'thmeBg': !pageSet.topBgImg}">
				<view class="text-right white p-right24">
					<text class="iconfont icon-qiandao size44" @click="toSign" v-if="pageSet.showSignIn == 1"></text>
					<text class="iconfont icon-conversation_icon size44 m-left30" :class="{unread: parseInt(userinfo.unreadMsg)}"
						:data-num="userinfo.unreadMsg" @click="toUrl('/userPage/message/messageList')"
						v-if="startUp.service_state == 1 && pageSet.showMessage == 1"></text>
				</view>
			</view>
			<view class="card bgwhite zIndex">
				<image :src="userinfo.headimg ? $imgUrls(userinfo.headimg) : $imgUrls(logo)" mode="aspectFill"
					@click="toUrl('/userPage/user/userinfo')" class="bulge bgwhite bor_radius p-ab"></image>
				<view class="flexac m-bot24" v-if="userinfo">
					<view class="size32 bold">{{ userinfo.nickName }}</view>
					<view class="bgFC3 bor_radius_10 padding2-14 size22 m-left10 f-shrink-0" v-if="userinfo.vipId">
						{{ userinfo.vipName }}
					</view>
				</view>
				<view class="size32 bold m-bot24 text-center" v-else @click="showModal = true">登录/注册</view>
				<view class="color_66 m-bot24 text-center" v-if="userinfo.nextLevel && userinfo.nextLevel.vipPrice > 0"
					@click="toUrl('/pages/Vip/Vip')">
					<text>升级获得{{ userinfo.nextLevel.vipName }}会员权益</text>
					<text class="iconfont icon-xiangyouxiayiye h6 color_66"></text>
				</view>
				<view class="d-flex a-center m-bot24">
					<view class="flex-1 flexac" @click="toUrl('/moneyPage/capital/myMoney')">
						<image :src="imgUrl + 'Uploads/diy/userCenter/balance.png'" mode="widthFix" style="width: 90rpx;"></image>
						<view class="m-left20">
							<view class="h7"><text
									class="size42">{{ money }}</text>{{ unit }}{{ nameDefinition.balanceUnit || '元' }}</view>
							<view class="color_66 m-top4">{{ nameDefinition.balanceTitle || '余额' }}</view>
						</view>
					</view>
					<view class="line bgdd"></view>
					<view class="flex-1 flexac" @click="toUrl('/userPage/user/discount_coupon')">
						<image :src="imgUrl + 'Uploads/diy/userCenter/coupon.png'" mode="widthFix" style="width: 90rpx;"></image>
						<view class="m-left20">
							<view class="h7"><text class="size42">{{ userinfo.couponCount || 0 }}</text>张</view>
							<view class="color_66 m-top4">优惠券</view>
						</view>
					</view>
				</view>
				<view class="bgF5 bor_radius_10 d-flex a-center" style="height: 132rpx;">
					<view class="w-25 text-center" @click="toUrl('/userPage/sign/integralRecord')">
						<view class="size42">{{ userinfo.sign > 9999 ? '9999+' : (userinfo.sign || 0) }}</view>
						<view class="color_66 m-top4">{{ nameDefinition.fenTitle || '积分' }}</view>
					</view>
					<view class="w-25 text-center" @click="toUrl('/userPage/user/CollectList')">
						<view class="size42">{{ userinfo.collectCount || 0 }}</view>
						<view class="color_66 m-top4">收藏</view>
					</view>
					<view class="w-25 text-center" @click="toUrl('/userPage/user/followList')">
						<view class="size42">{{ userinfo.followCount || 0 }}</view>
						<view class="color_66 m-top4">关注</view>
					</view>
					<view class="w-25 text-center" @click="toUrl('/userPage/user/viewed')">
						<view class="size42">{{ footprint }}</view>
						<view class="color_66 m-top4">足迹</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 京东 -->
		<view class="top_2 auto100" :class="{'pTop': pageSet.immerse}"
			:style="{backgroundImage: pageSet.topBgImg ? 'url('+pageSet.topBgImg+')' : 'none'}" v-if="pageSet.style == 2">
			<view class="d-flex p-left6 p-right6 m-bot24">
				<image :src="userinfo.headimg ? $imgUrls(userinfo.headimg) : $imgUrls(logo)" mode="aspectFill"
					@click="toUrl('/userPage/user/userinfo')" class="avatar bor_radius m-right20"></image>
				<view class="flex-1">
					<view class="d-flex a-center f-wrap m-bot10" v-if="userinfo">
						<view class="size34 bold">{{ userinfo.nickName }}</view>
						<view class="bgFC3 bor_radius_10 padding2-14 size22 m-left10" v-if="userinfo.vipId">{{ userinfo.vipName }}
						</view>
					</view>
					<view class="size34 bold m-bot10" v-else @click="showModal = true">登录/注册</view>
					<view class="size28" @click="toUrl('/moneyPage/capital/myMoney')">
						{{ nameDefinition.balanceTitle || '余额' }} ￥{{ money }}
						<text class="h7">{{ unit }}{{ nameDefinition.balanceUnit || '元' }}</text>
					</view>
				</view>
				<text class="iconfont icon-qiandao size44" @click="toSign" v-if="pageSet.showSignIn == 1"></text>
				<text class="iconfont icon-a-zu1870 size44 m-left30" :class="{unread: parseInt(userinfo.unreadMsg)}"
					:data-num="userinfo.unreadMsg" @click="toUrl('/userPage/message/messageList')"
					v-if="startUp.service_state == 1 && pageSet.showMessage == 1"></text>
			</view>
			<view class="p-re m-bot24" v-if="userinfo.nextLevel && userinfo.nextLevel.vipPrice > 0">
				<image :src="imgUrl + 'Uploads/diy/userCenter/vipImg.png'" mode="widthFix"></image>
				<view class="up d-flex a-center white bold p-ab" @click="toUrl('/pages/Vip/Vip')">
					<text class="m-right10">升级会员</text><text class="iconfont icon-a-RectangleCopy size16"></text>
				</view>
				<view class="next wh d-flex a-center p-ab">
					<view class="size28 m-top20 f-shrink-0">{{ userinfo.nextLevel.vipName }}</view>
					<view class="size26 ellipsis_2">{{ userinfo.nextLevel.vipInfo}}</view>
				</view>
			</view>
			<view class="bgwhite bor_radius_10 d-flex a-center" style="height: 132rpx;">
				<view class="w-20 text-center" @click="toUrl('/userPage/sign/integralRecord')">
					<view class="size42">{{ userinfo.sign > 9999 ? '9999+' : (userinfo.sign || 0) }}</view>
					<view class="size26 color_66 m-top10">{{ nameDefinition.fenTitle || '积分' }}</view>
				</view>
				<view class="w-20 text-center" @click="toUrl('/userPage/user/discount_coupon')">
					<view class="size42">{{ userinfo.couponCount || 0 }}</view>
					<view class="size26 color_66 m-top10">优惠券</view>
				</view>
				<view class="w-20 text-center" @click="toUrl('/userPage/user/CollectList')">
					<view class="size42">{{ userinfo.collectCount || 0 }}</view>
					<view class="size26 color_66 m-top10">收藏</view>
				</view>
				<view class="w-20 text-center" @click="toUrl('/userPage/user/followList')">
					<view class="size42">{{ userinfo.followCount || 0 }}</view>
					<view class="size26 color_66 m-top10">关注</view>
				</view>
				<view class="w-20 text-center" @click="toUrl('/userPage/user/viewed')">
					<view class="size42">{{ footprint }}</view>
					<view class="size26 color_66 m-top10">足迹</view>
				</view>
			</view>
		</view>

		<!-- 淘宝 -->
		<view class="top_3 auto100 p-top40" :class="{'pTop': pageSet.immerse, 'bgwhite': !pageSet.topBgImg}"
			v-if="pageSet.style == 3" :style="{backgroundImage: pageSet.topBgImg ? 'url('+pageSet.topBgImg+')' : 'none'}">
			<view class="d-flex p-left40 p-right40 m-bot30">
				<image :src="userinfo.headimg ? $imgUrls(userinfo.headimg) : $imgUrls(logo)" mode="aspectFill"
					@click="toUrl('/userPage/user/userinfo')" class="avatar bor_radius m-right20"></image>
				<view class="flex-1 a-self-center">
					<view class="d-flex a-center f-wrap m-bot10" v-if="userinfo">
						<view class="size34 bold">{{ userinfo.nickName }}</view>
						<view class="bgFC3 bor_radius_10 padding2-14 size22 m-left10" v-if="userinfo.vipId">{{ userinfo.vipName }}
						</view>
					</view>
					<view class="size34 bold m-bot10" v-else @click="showModal = true">登录/注册</view>
					<view class="size28 m-bot10" v-if="Result.userInfo">{{ Result.userInfo.desensitizationPhone }}</view>
					<view class="d-flex a-center">
						<view class="size26" @click="toUrl('/userPage/user/followList')">关注 {{ userinfo.followCount || 0 }}</view>
						<view class="line"></view>
						<view class="size26" @click="toUrl('/userPage/user/CollectList')">收藏 {{ userinfo.collectCount || 0 }}
						</view>
						<view class="line"></view>
						<view class="size26" @click="toUrl('/userPage/user/viewed')">足迹 {{ footprint }}</view>
					</view>
				</view>
				<view class="text-center" @click="toSign" v-if="pageSet.showSignIn == 1">
					<text class="iconfont icon-qiandao size40 p-left20 p-right20"></text>
					<view class="m-top4">签到</view>
				</view>
				<view class="text-center" @click="toUrl('/userPage/message/messageList')"
					v-if="startUp.service_state == 1 && pageSet.showMessage == 1">
					<text class="iconfont icon-conversation_icon size40 p-left20 p-right20"
						:class="{unread: parseInt(userinfo.unreadMsg)}" :data-num="userinfo.unreadMsg"></text>
					<view class="m-top4">消息</view>
				</view>
			</view>
			<view class="grade padding20 white">
				<view class="d-flex a-center" v-if="userinfo.nextLevel && userinfo.nextLevel.vipPrice > 0">
					<view class="size32 bold m-right20">{{ userinfo.nextLevel.vipName }}</view>
					<view class="flex-1 ellipsis m-right20">{{ userinfo.nextLevel.vipInfo }}</view>
					<view class="btn bgwhite bold" @click="toUrl('/pages/Vip/Vip')">升级会员</view>
				</view>
				<view class="d-flex a-center" v-else-if="userinfo.thisLevel">
					<view class="size32 bold m-right20" v-if="userinfo.vipId">{{ userinfo.vipName }}</view>
					<view class="flex-1 ellipsis m-right20">{{ userinfo.thisLevel.vipInfo }}</view>
					<view class="btn bgwhite bold"
						@click="toUrl('/userPage/user/introduce?type=1&title='+configJson.entrance_name, false)"
						v-if="configJson.content">{{ configJson.entrance_name }}</view>
				</view>
				<view class="size26 text-center" v-else @click="showModal = true">点击登录获取会员权益</view>
			</view>
			<view class="arc bgF5 d-flex a-center zIndex">
				<view class="text-center flex-1" @click="toUrl('/moneyPage/capital/myMoney')">
					<view class="size40 color_33">{{ money }}</view>
					<view class="size26 color_66 m-top10">
						{{ nameDefinition.balanceTitle || '余额' }}({{ unit }}{{ nameDefinition.balanceUnit || '元' }})
					</view>
				</view>
				<view class="bgdd"></view>
				<view class="text-center flex-1" @click="toUrl('/userPage/sign/integralRecord')">
					<view class="size40 color_33">{{ userinfo.sign || 0 }}</view>
					<view class="size26 color_66 m-top10">{{ nameDefinition.fenTitle || '积分' }}</view>
				</view>
				<view class="bgdd"></view>
				<view class="text-center flex-1" @click="toUrl('/userPage/user/discount_coupon')">
					<view class="size40 color_33">{{ userinfo.couponCount || 0 }}</view>
					<view class="size26 color_66 m-top10">优惠券</view>
				</view>
			</view>
		</view>

		<view class="coinCard bgwhite" v-if="userinfo.coin_show == 1">
			<view class="d-flex a-center m-bot12">
				<view class="flex-1 size30 color_33 bold">{{ userinfo.coinTitle }}</view>
				<view class="h6 color_82">{{ userinfo.coinInfo }}</view>
			</view>
			<view class="size40 color_33 m-bot12">{{ userinfo.coin }}</view>
			<u-line-progress :percentage="userinfo.coin * 100" :showText="false" :activeColor="color" height="8"></u-line-progress>
		</view>

		<!-- 组件 -->
		<view v-if="pageData.length">
			<block v-for="(item,index) in pageData" :key="index">
				<gridCard v-if="item.type == 'gridCard'" :pageData="item.compCont" :orderCount="orderCount" :Result="Result"
					:userinfo="userinfo" :configJson="configJson" @openModal="showModal = true" @openDeposit="isDeposit = true">
				</gridCard>
				<Bannel v-if="item.type == 'banner'" :pageData="item.compCont" :isImmerse="1"></Bannel>
				<adv v-if="item.type == 'advertisement'" :pageData="item.compCont"></adv>
				<hotZone v-if="item.type == 'hotZone'" :pageData="item.compCont"></hotZone>
				<divider v-if="item.type == 'divider'" :pageData="item.compCont"></divider>
			</block>
		</view>

		<!-- 关注公众号 -->
		<image :src="imgUrl + '/Uploads/singleSale/singleSaleShopH5/demoTpl/2/static/icon/WeChat.png'" mode="widthFix"
			class="follow_btn bor_radius" v-if="wxQRCode" @click="wxQRCode_switch = true"></image>

		<!-- 弹框识别公众号 -->
		<view class="mask flexac f-column" v-if='wxQRCode && wxQRCode_switch'>
			<image :show-menu-by-longpress='true' :src="$imgUrls(wxQRCode)" mode="widthFix" class="viewbox5"></image>
			<text class="iconfont icon-guanbi size60" @click="wxQRCode_switch = false"></text>
		</view>

		<Deposit :isDeposit="isDeposit" :userinfo="userinfo" @close="closeDeposit"></Deposit>
		<showModel @cancelFunc='closeModel' goHome='0' v-if='showModal' type='2'></showModel>
		<contact v-if="pageSet.style != undefined"></contact>
		<tabBar :tab="2"></tabBar>
	</view>
</template>

<script>
	import contact from '@/components/contact/contact.vue'
	import Deposit from '@/components/User/Deposit.vue'
	import { mapState } from "vuex"
	import gridCard from '@/components/User/gridCard.vue'
	import Bannel from '@/components/home/Bannel.vue'
	import adv from '@/components/home/adv.vue'
	import hotZone from '@/components/home/hotZone.vue'
	import divider from '@/components/home/divider.vue'
	export default {

		components: {
			contact,
			Deposit,
			gridCard,
			Bannel,
			adv,
			hotZone,
			divider
		},
		data() {
			return {
				imgUrl: this.imgUrl,
				Result: '',
				userinfo: '', // 用户信息
				configJson: '', // 会员卡信息
				orderCount: '',
				money: 0,
				unit: '',
				wxQRCode: '',
				wxQRCode_switch: false,
				signInState: '0', // 活动开启 1开启 0未开启  未开启则去旧签到功能界面
				footprint: 0, // 足迹
				isDeposit: false, // 退押金
				noPayOrde: {}, // 仓库数量
				toTop: false,
				showModal: false,
				pageSet: { // 页面设置
					immerse: true,
					topBgImg: ''
				},
				pageData: '' // diy组件
			}
		},
		onLoad() {
			this.diyget()
		},
		onShow() {
			this.getUserinfo()
			this.getBasicInfo()
		},
		methods: {
			diyget() {
				this.$http.get({
					url: '/newdiy/api/v1/diy/getDiyPage',
					data: {
						front: 1,
						type: 5
					}
				}).then(res => {
					if (res.data) {
						if (res.data.pageSet) {
							this.pageSet = res.data.pageSet
							this.pageData = res.data.front_value || []
						} else { // 新建了但未点保存
							this.initSet()
						}
					} else { // 未新建模板
						this.initSet()
					}
				})
			},
			initSet() { // 默认配置
				this.pageSet.style = 0
				this.pageSet.showSignIn = 1
				this.pageSet.showMessage = 1
				this.pageData = [
					{ type: "gridCard", compCont: { template: 1, title: '订单中心' } },
					{ type: "gridCard", compCont: { template: 2, title: '仓库中心' } },
					{ type: "gridCard", compCont: { template: 4, title: '常用功能' } }
				]
			},
			closeDeposit() {
				this.isDeposit = false
				this.getUserinfo()
			},
			getBasicInfo() {
				this.$http.post({
					url: '/zzj_singleSaleApi/getMyOrderBasicInfo',

				}).then(res => {
					if (res.errcode != '100') return that.$Toast(res.msg)
					this.noPayOrde = res.data
				})
			},
			toSign() {
				if (this.signInState == 1) {
					this.toUrl('/userPage/sign2/sign_in')
				} else {
					this.toUrl('/userPage/sign/sign_in')
				}
			},
			closeModel() {
				this.showModal = false
				this.getUserinfo()
			},
			toUrl(url, flag = true) { // flag:是否判断vid
				if (flag && (!this.vid || this.vid == 0)) {
					this.showModal = true
					return
				}
				if (url) {
					if (url == '/userPage/login/binding?type=1') {
						// #ifdef MP-WEIXIN
						this.showModal = true
						return
						// #endif
					}
					uni.navigateTo({
						url: url
					})
				}
			},
			getUserinfo() { // 获取用户信息
				this.$http.post({
					url: '/SRA_userIntegral/myInfo',
					data: {
						VeriCode: this.bid,
						vId: this.vid
					}
				}).then(res => {
					if (res.data) {
						this.Result = res.data
						this.signInState = res.data.signInState
						if (res.data.myJson) {
							this.userinfo = res.data.myJson
							this.orderCount = res.data.myJson.order_count
							var m = parseFloat(res.data.myJson.money)
							if (m > 9999) {
								this.unit = '万'
								// 保留两位小数、不四舍五入
								// m = (m / 10000).toFixed(2)
								m = Math.floor(m / 10000 * 100) / 100
							}
							this.money = m
						}
						if (res.data.configJson) {
							this.configJson = res.data.configJson
							this.wxQRCode = res.data.configJson.wxQRCode // 公众号二维码
						}
						this.getHistory()
					} else {
						this.userinfo = ''
						this.orderCount = ''
						this.money = 0
					}
				})
			},
			getHistory() { // 获取足迹
				this.$http.post({
					url: '/singleSaleApi/footprint'
				}).then(res => {
					this.footprint = res.count || 0
				})
			}
		},

		computed: {
			...mapState(['vid', 'bid', 'logo', 'nameDefinition', 'startUp', 'color', 'tabTitle', 'share', 'totalHeight']),
		},

		onPageScroll(e) {
			if (e.scrollTop > 100) {
				this.toTop = true
			} else {
				this.toTop = false
			}
		},
		onShareAppMessage() {
			let share = this.share
			return {
				title: share.title,
				desc: share.desc,
				path: `/pages/index/index?share_v_id=${this.vid}&pageType=999`,
				imageUrl: `${share.imageUrl}`
			}
		},

	}
</script>

<style scoped lang="scss">
	.myPage {
		min-height: 100vh;
	}

	.top_0 {
		padding: 24rpx 24rpx 0 24rpx;

		.avatar {
			width: 100rpx;
			height: 100rpx;
		}

		.collect {
			line-height: 50rpx;
			margin: 0 24rpx;
			background: #666;
		}

		.grade {
			height: 130rpx;

			.right {
				right: 20rpx;
				bottom: 20rpx;
			}

			.up {
				background: #FF6600;
				border-radius: 0 20rpx 0 20rpx;
				right: 0;
				top: 0;
			}
		}
	}

	.top_1 {
		padding: 340rpx 24rpx 0 24rpx;

		.back {
			width: 100%;
			height: 428rpx;
			top: 0;
			left: 0;
			border-radius: 0 0 50% 50%/5%;
		}

		.card {
			padding: 88rpx 24rpx 24rpx 24rpx;
			border-radius: 10rpx 10rpx 0 0;

			.bulge {
				width: 128rpx;
				height: 128rpx;
				left: 50%;
				top: -74rpx;
				margin-left: -74rpx;
				border: 10rpx solid #fff;
			}

			.line {
				width: 1rpx;
				height: 60rpx;
			}
		}
	}

	.top_2 {
		padding: 24rpx 24rpx 0 24rpx;

		.avatar {
			width: 90rpx;
			height: 90rpx;
		}

		.up {
			left: 50rpx;
			top: 8rpx;
			z-index: 10;
		}

		.next {
			left: 0;
			top: 0;
			color: #C48A40;

			>view {
				padding: 0 30rpx;

				&:first-child {
					width: 240rpx;
					color: #7F500A;
				}
			}
		}
	}

	.top_3 {
		.avatar {
			width: 120rpx;
			height: 120rpx;
		}

		.line {
			width: 1rpx;
			height: 20rpx;
			background: #999;
			margin: 0 20rpx;
		}

		.grade {
			background: linear-gradient(45deg, #ffae53, #fd7230);
			border-radius: 40rpx 40rpx 0 0;
			margin: 0 40rpx;
			transform: translateY(2rpx);

			.btn {
				padding: 0 18rpx;
				line-height: 42rpx;
				border-radius: 21rpx;
				color: #FF6600;
			}
		}

		.arc {
			border-radius: 50rpx 50rpx 0 0;
			padding: 40rpx 0 16rpx 0;

			.bgdd {
				width: 1rpx;
				height: 64rpx;
			}
		}
	}

	.pTop {
		padding-top: var(--total-height);
	}

	.auto100 {
		background-size: 100% auto;
		background-repeat: no-repeat;
	}

	.follow_btn {
		width: 80rpx;
		height: auto;
		background: rgba(0, 0, 0, 0.4);
		position: fixed;
		right: 24rpx;
		bottom: calc(150rpx + constant(safe-area-inset-bottom));
		bottom: calc(150rpx + env(safe-area-inset-bottom));
		z-index: 30;
	}

	.viewbox5 {
		height: auto;
	}

	.avatar {
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, .1);
	}
	.coinCard {
		padding: 24rpx;
		margin: 24rpx;
		border-radius: 12rpx;
	}
</style>